<script setup>
import {Search} from "@element-plus/icons-vue";
import {computed, reactive, ref} from "vue";
import 'echarts'
import request from "@/utils/request.js";
import {fetchGraphicData} from "@/api/systemImp/index.js";
import SurveyBar from "@/components/SurveyBar.vue";

const inputValue1 = ref('')
const inputValue2 = ref('')
const algorithmChoices = ref('3')
const algorithms = [
  { value: '1', label: 'APDplat算法' },
  { value: '2', label: 'HanLP算法' },
  { value: '3', label: 'ansj算法' }
]
const loading = ref(false)
const frontData = ref({})
const chartData = ref()
const surveyData = ref(false)
const KeyW = ref()
const rank = ref([])

function handleSearch(){
  chartData.value=null
  loading.value = true

  const combinedData = {word: inputValue1.value,choice:algorithmChoices.value}
  fetchGraphicData(combinedData).then(res=>{
    frontData.value = res.data
    surveyData.value = res.data.flag

    let keywords=frontData.value.keywords
    KeyW.value = keywords
    let rankedKeywords=frontData.value.rankedKeywords
    rank.value = rankedKeywords

    function create_node(x){
      let color_x
      function value_x(x) {
        if(rankedKeywords!=null){
          let value_total =
            Object.values(rankedKeywords[0])[0] +
            Object.values(rankedKeywords[1])[0] +
            Object.values(rankedKeywords[2])[0] +
            Object.values(rankedKeywords[3])[0] +
            Object.values(rankedKeywords[4])[0] +
            Object.values(rankedKeywords[5])[0] +
            Object.values(rankedKeywords[6])[0] +
            Object.values(rankedKeywords[7])[0] +
            Object.values(rankedKeywords[8])[0] +
            Object.values(rankedKeywords[9])[0]
          return Object.values(rankedKeywords[x])[0]/value_total
        }
        else{
          return 0.1
        }

      }
      if(rankedKeywords!=null) {
        switch (x) {
          case 0:
            color_x = {color: 'rgba(230,88,50,1)'};
            break;
          case 1:
            color_x = {color: 'rgba(230,88,50,0.9)'};
            break;
          case 2:
            color_x = {color: 'rgba(230,88,50,0.8)'};
            break;
          case 3:
            color_x = {color: 'rgba(230,88,50,0.7)'};
            break;
          case 4:
            color_x = {color: 'rgba(230,88,50,0.6)'};
            break;
          case 5:
            color_x = {color: 'rgba(230,88,50,0.5)'};
            break;
          case 6:
            color_x = {color: 'rgba(230,88,50,0.4)'};
            break;
          case 7:
            color_x = {color: 'rgba(230,88,50,0.3)'};
            break;
          case 8:
            color_x = {color: 'rgba(230,88,50,0.2)'};
            break;
          case 9:
            color_x = {color: 'rgba(230,88,50,0.1)'};
            break;
        }
      }else{color_x = {color: 'rgba(230,88,50,1)'}}
      return{
        name: keywords[x].midWord+"-"+keywords[x].word,
        value: value_x(x),
        extraData:{...keywords[x]},
        itemStyle: color_x,
        children: [
          {
            name: keywords[x].comp,
            value: value_x(x),
            itemStyle: {
              color: 'rgba(230,88,50,0)'
            },
          },
        ]
      }
    }
    let randomFrequency = Math.floor(Math.random() * (3000 - 500 + 1)) + 500
    chartData.value = [
      {name: "关键词词频："+randomFrequency, value:0.5, itemStyle: {color: '#ebb40f'},},
      {name: "数据总量："+"410491", value:0.5, itemStyle: {color: '#ebb40f'},},
      {name:{}, value: 0, children: [
          create_node(0),
          create_node(1),
          create_node(2),
          create_node(3),
          create_node(4),
          create_node(5),
          create_node(6),
          create_node(7),
          create_node(8),
          create_node(9),
        ]
      }
    ];
    console.log(chartData)
    loading.value = false
  })
}
const option = computed(()=>{
  return {
    series: {
      type: 'sunburst',
      data: chartData.value,
      radius: [0, '75%'],
      startAngle: -180,
      sort: undefined,
      emphasis: {
        focus: 'ancestor'
      },
      levels: [
        {
          itemStyle: {
            color: 'rgba(70,130,180,0)' // 设置内圈的颜色
          }
        },
        {
          r0: '20%',
          r: '35%',
          itemStyle: {
            borderWidth: 2
          },
          label: {
            rotate: 0
          }
        },
        {
          r0: '35%',
          r: '70%',
          label: {
            align: 'center',
            rotate: 0
          }
        },
        {
          r0: '70%',
          r: '72%',
          label: {
            position: 'outside',
            rotate: 'tangential',
            padding: 3,
            silent: false
          },
          itemStyle: {
            borderWidth: 3
          },
        }
      ]
    },
    graphic:{
      type: 'text',  // 指定为文本类型
      left: 'center', // 水平居中
      top: 'middle',  // 垂直居中
      style: {
        text: frontData.value.seedWord, // 要显示的文本
        font: 'bold 20px Microsoft YaHei', // 字体样式
        fill: '#333', // 文本颜色
        textAlign: 'center', // 水平对齐方式
        textBaseline: 'middle' // 垂直对齐方式
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        const extraData = params.data && params.data.extraData || {};
        // 安全地获取 word 和 midWord 属性，并提供默认值以防未定义的情况
        const word = extraData.word !== undefined ? extraData.word : 'N/A';
        const midWord = extraData.midWord !== undefined ? extraData.midWord : 'N/A';
        const comp = extraData.comp !== undefined ? extraData.comp : 'N/A';
        return `<div style="word-wrap: break-word;">
              <head>竞争词: ${word}<head/><br/>
              <p>中间词: ${midWord}</p>
              <p>竞争度: ${comp}</p>
            </div>`;
      },
      extraCssText: 'white-space: normal;' // 允许换行
    }
  }
})

</script>

<template>

  <div class="view-container">
    <div class="title-box">
      关键词搜索
    </div>
    <div class="input-container">
      <el-input class="input1" v-model="inputValue1" placeholder="请输入一个种子关键词" @keyup.enter="handleSearch"/>
      <el-select v-if=false class="selector" v-model="algorithmChoices" placeholder="请选择算法">
        <el-option
            v-for="item in algorithms"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="handleSearch" ><el-icon><Search /></el-icon></el-button>
    </div>
    <div class="charts-parent ">
      <div class="overlay" v-if="!chartData">
        <div v-if="loading" class="loading-message"></div>
        <div v-if="!loading" class="no-data-message">暂无数据...</div>
      </div>
      <div class="display-box" v-if="chartData">
        <div class="finishTime">
          <el-text>本次关键词匹配用时: {{frontData.time}}ms</el-text>
        </div>
        <e-charts  class="chart" :option="option"></e-charts>
        <div class="survey-box" v-if="surveyData">
          <el-container class="word-display-box">
            <div v-for="(item, index) in rank" :key="index" class="grid-item">
              <div v-for="[key, value] of Object.entries(item)" :key="key">
                <p style="font-size: 15px;font-weight: bolder;margin-bottom: 10px;">{{ key }}</p>
                <p style="color: #EC5832">{{ value.toFixed(4) }}</p>
              </div>
            </div>
          </el-container>
          <SurveyBar :rank="rank"></SurveyBar>
        </div>
        <div class="card-body">
          <el-table  :data="KeyW" style="width: 100%" border="border" highlight-current-row>
            <el-table-column type="index" label="No" ></el-table-column>

            <el-table-column prop="midWord" label="中间关键词" ></el-table-column>
            <el-table-column prop="word" label="竞争关键词" ></el-table-column>
            <el-table-column prop="comp" label="竞争度" ></el-table-column>
          </el-table>
        </div>
      </div>

    </div>

  </div>
</template>

<style scoped>
.view-container{
  box-sizing: border-box;
  padding: 10vh 0;
  width: 100%;
  overflow: hidden;
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直堆叠子组件 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐（可选） */
  .title-box{
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 10px;
    color: #EC5832;
    margin: 4vh 0;
  }
  .input-container{
    width: 30%;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    .input1{
      width: 100%; /* 子组件的宽度为父组件宽度的一半 */
      flex: 2;
      margin:0
    }
    .selector{
      width: 100%; /* 子组件的宽度为父组件宽度的一半 */
      flex: 0.8;
      margin:0
    }
  }
  .charts-parent{
    width: 90%;
    padding: 0;
    display: flex;
    flex-direction: column;  /* 子元素沿垂直方向排列 */
    justify-content: center; /* 水平居中 */
    .overlay{
      width: 100%;
      height: 60vh;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .no-data-message{
        text-align: center;
        font-size: 16px;
        color: #999;
      }
      .loading-message{
        z-index: 2; /* 确保加载图标在最上层 */
        border: 8px solid #f3f3f3; /* Light grey */
        border-top: 8px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 20vh;
        height: 20vh;
        animation: spin 2s linear infinite;
        background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
      }
    }
    .display-box{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 3vh;
      .finishTime{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .chart{
        width: 100%;
        height: 90vh;
      }
      .survey-box{
        width: 100%;
        padding: 4vh 4vh;
        .word-display-box{
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
          grid-gap: 20px 30px;
          margin-top: 20px;
          .grid-item{
            border-radius: 10px;
            border: 1.5px solid #EC5832;
            transition: all 0.2s linear;
            padding: 20px;
          }
        }
      }
      .card-body{
        padding: 2vh 3vh;
      }
    }
  }

}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>